const htmlWebpackPlugin = require("html-webpack-plugin")
const path = require("path")

module.exports = {
    entry: "./app.js",

    mode: "development",

    devtool: "source-map",

    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, './dist'),
        clean: true
    },

    devServer: {
        hot: true
    },

    module: {
        rules: [{
            test: /\.css$/,
            use: [
                // style-loader：创建style标签，将js中的样式资源插入进去，添加到head中生效
                'style-loader',
                // css-loader：将css文件变成commonjs模块加载到js中，里面内容是样式字符串
                'css-loader'
            ]
        }]
    },

    plugins: [
        new htmlWebpackPlugin({
            title: "Webpack App"
        })
    ]
}